import React from 'react'

// 文件上传功能演示组件
const FileUploadDemo: React.FC = () => {
  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>文件上传功能说明</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <h3>📁 支持的文件类型</h3>
        <ul>
          <li><strong>图片格式：</strong>JPG、PNG、GIF、WebP</li>
          <li><strong>视频格式：</strong>MP4、WebM、OGG、AVI、MOV</li>
          <li><strong>文件大小：</strong>最大50MB</li>
        </ul>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h3>🚀 上传方式</h3>
        <ul>
          <li><strong>点击上传：</strong>点击"+"按钮选择文件</li>
          <li><strong>拖拽上传：</strong>直接拖拽文件到聊天区域</li>
          <li><strong>实时进度：</strong>显示上传进度条</li>
        </ul>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h3>✨ 功能特性</h3>
        <ul>
          <li><strong>图片压缩：</strong>自动压缩大图片，优化加载速度</li>
          <li><strong>文件预览：</strong>支持图片点击放大预览</li>
          <li><strong>文件信息：</strong>显示文件名和大小</li>
          <li><strong>格式验证：</strong>自动验证文件类型和大小</li>
          <li><strong>错误处理：</strong>友好的错误提示</li>
        </ul>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h3>📱 使用方法</h3>
        <ol>
          <li>在聊天界面点击"+"按钮</li>
          <li>选择"图片"或"视频"选项</li>
          <li>选择要上传的文件</li>
          <li>等待上传完成</li>
          <li>文件会自动发送到聊天中</li>
        </ol>
      </div>

      <div style={{ 
        padding: '16px', 
        backgroundColor: '#f0f8ff', 
        borderRadius: '8px',
        border: '1px solid #d1ecf1'
      }}>
        <h4>💡 提示</h4>
        <p>• 支持拖拽文件到聊天区域直接上传</p>
        <p>• 图片会自动压缩到合适大小</p>
        <p>• 上传过程中会显示进度条</p>
        <p>• 点击图片可以放大查看</p>
      </div>
    </div>
  )
}

export default FileUploadDemo



